<script setup>
import { ref } from 'vue'
import DropdownSelect from '@/components/DropdownSelect/DropdownSelect.vue'

// 响应式数据
const selectedValue = ref(null)
const selectedValues = ref([])
const selectedCar = ref(null)
const selectedItem = ref(null)
const selectedUser = ref(null)

// 示例选项
const options = [
  { id: 1, name: '北京' },
  { id: 2, name: '上海' },
  { id: 3, name: '广州' }
]

const users = [
  { id: 1, fullName: '用户一', avatar: 'https://picsum.photos/30/30?random=1' },
  { id: 2, fullName: '用户二', avatar: 'https://picsum.photos/30/30?random=2' },
  { id: 3, fullName: '用户三', avatar: 'https://picsum.photos/30/30?random=3' }
]

const carOptions = [
  { group: '德国车', items: [
      { value: 'bmw', label: '宝马' },
      { value: 'benz', label: '奔驰' }
  ]},
  { group: '日本车', items: [
      { value: 'toyota', label: '丰田' }
  ]}
]
</script>

<template>
  <div>
    <!-- 基础使用 -->
    <h2>基础使用</h2>
    <DropdownSelect
        v-model="selectedValue"
        :options="['Apple', 'Banana', 'Orange']"
        placeholder="选择水果"
    />

    <div class="divider"></div> <!-- 添加分隔线 -->

    <!-- 对象选项多选 -->
    <h2>对象选项多选</h2>
    <DropdownSelect
        v-model="selectedValues"
        :options="options"
        option-label="name"
        option-value="id"
        multiple
        placeholder="选择城市"
    />

    <div class="divider"></div> <!-- 添加分隔线 -->

    <!-- 过滤和分组 -->
    <h2>过滤和分组</h2>
    <DropdownSelect
        v-model="selectedCar"
        :options="carOptions"
        filterable
        filter-placeholder="搜索车型"
    />

    <div class="divider"></div> <!-- 添加分隔线 -->

    <!-- 禁用状态 -->
    <h2>禁用状态</h2>
    <DropdownSelect
        v-model="selectedItem"
        :options="options"
        disabled
        placeholder="禁用状态"
    />

    <div class="divider"></div> <!-- 添加分隔线 -->

    <!-- 自定义样式和插槽 -->
    <h2>自定义样式和插槽</h2>
    <DropdownSelect
        v-model="selectedUser"
        :options="users"
        option-label="fullName"
        option-value="id"
        :input-style="{ border: '2px solid #4CAF50' }"
    >
      <template #option="{ option }">
        <div style="display: flex; align-items: center">
          <img
              :src="option.avatar"
              style="width: 30px; height:30px; border-radius:50%; margin-right:10px"
          >
          {{ option.fullName }}
        </div>
      </template>
    </DropdownSelect>
  </div>
</template>

<style scoped>
.divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 20px 0; /* 分隔线的上下间距 */
}
</style>